<template>
  <div class="recharge-record-container">
    <m-header title="充值记录">
      <span class="rximg" slot="right" @click="showFilterModal">筛选</span>
    </m-header>
    <div :key="index" v-for="(item, index) in recordList">
      <div class="summary">
        <div class="month">
          <div class="month-wrapper">
            <datetime
              v-model="currentDate"
            >
            </datetime>
          </div>
          <img @click="showDetail(item)" src="../../../assets/imgs/mine/chongzhi.png" alt=""></div>
        <div class="number">总计金额 ¥{{item.total}}</div>
      </div>
      <div class="detail" v-if="item.showDetail">
        <div class="item" :key="detailIndex" v-for="(detailItem, detailIndex) in item.detailList">
          <div class="first-col">
            <div class="method">
              {{detailItem.method}}
            </div>
            <div class="dateTime">
              {{detailItem.dateTime}}
            </div>
          </div>
          <div class="status">
            {{detailItem.status}}
            </div>
          <div class="money">
            ¥{{detailItem.money}}
          </div>
        </div>
      </div>
    </div>
    <div v- class="filter-modal">
      <x-dialog v-model="showFilter" hide-on-blur>
        <div class="modal-content">
          <div class="title">
            选择类型
            <img @click="showFilter=false" src="../../../assets/imgs/mine/chongzhi.png" alt="">
          </div>
          <div class="selector">
            <div @click="changeStatus=index" :class="changeStatus===index?'active':''" v-for="(item, index) in statusList" :key="index">
              {{item.label}}
            </div>
          </div>
          <div class="btn" @click="selectFilter">确定</div>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>

import { mapActions } from 'vuex';
import { XDialog, Datetime } from 'vux'

export default {
  components: {
    XDialog,
    Datetime
  },
  data () {
    return {
      statusList: [
        {value: '1', label: '全部'},
        {value: '2', label: '支付成功'},
        {value: '3', label: '处理中'}
      ],
      recordList: [
        {
          month: '2018年12月',
          total: '2000',
          detailList: [
            {method: '微信', dateTime: '12月15日 20:57', status: '处理中', money: '50'},
            {method: '微信', dateTime: '12月15日 20:57', status: '支付成功', money: '100'},
            {method: '微信', dateTime: '12月15日 20:57', status: '支付成功', money: '500'},
            {method: '微信', dateTime: '12月15日 20:57', status: '支付成功', money: '50'}
          ]
        }
      ],
      showFilter: false,
      selectedStatus: 0,
      changeStatus: 0,
      currentDate: '2018-12-03'
    }
  },
  mounted () {
    this.getRechargeList({page: 1}).then(res => {
      if (res) {
        console.log(res, 888);
      }
    });
  },
  methods: {
    ...mapActions({
      getRechargeList: 'mine/getRechargeList'
    }),

    showDetail (item) {
      item.showDetail = !item.showDetail;
      this.$forceUpdate();
    },
    showFilterModal () {
      this.changeStatus = this.selectedStatus;
      this.showFilter = true;
    },
    selectFilter () {
      this.selectedStatus = this.changeStatus;
      this.showFilter = false;
    }
  }
}
</script>
<style lang="less">
  .recharge-record-container {
    padding-top: 0.92rem;
    padding-bottom: 0.2rem;
    background: #f7f7f7;
    .header-right {
      color: #ffffff;
      font-size: 0.3rem;
    }
    .summary {
      padding: 0.13rem 0.2rem;
      .month{
        font-size: 0.28rem;
        color: #333333;
        margin-bottom: 0.08rem;
        .month-wrapper {
          display: inline-block;
          width: 2rem;
        }
        img {
          width: 0.24rem;
          margin-left: 0.08rem;
        }
      }
      .number{
        font-size: 0.22rem;
        color: #999999;
      }
    }
    .detail{
      background: #ffffff;
      .item{
        border-bottom: 0.01rem solid #D2D2D2;
        height: 0.95rem;
        padding: 0 0.2rem;
        display: flex;
        .first-col {
          width: 2rem;
          height: 0.95rem;
          .method{
            margin-top: 0.2rem;
            margin-bottom: 0.08rem;
            font-size: 0.28rem;
            color: #333333;
          }
          .dateTime{
            font-size: 0.22rem;
            color: #999999;
          }
        }
        .status {
          width: 3rem;
          height: 0.95rem;
          line-height: 0.95rem;
          text-align: center;
          font-size: 0.28rem;
          color: #333333;
        }
        .money{
          text-align: right;
          width: 2rem;
          height: 0.95rem;
          line-height: 0.95rem;
          font-size: 0.34rem;
          color: #D44743;
        }
      }
    }
    .filter-modal {
      .modal-content {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        height: 3.2rem;
        .title {
          font-size: 0.28rem;
          color: #333333;
          height: 0.8rem;
          line-height: 0.8rem;
          border-bottom: 0.01rem solid #D2D2D2;
          position: relative;
          img {
            position: absolute;
            top: 0.28rem;
            right: 0.28rem;

            width: 0.24rem;
          }
        }
        .selector{
          font-size: 0.28rem;
          color: #333333;
          height: 0.8rem;
          padding: 0.3rem 0.2rem;
          div {
            display: inline-block;
            width: 2.2rem;
            height: 0.8rem;
            line-height: 0.8rem;
            border: 0.01rem solid #D2D2D2;
            color: #333333;
            font-size: 0.28rem;
            text-align: center;
            border-radius: 0.06rem;
            &.active {
              color: #ffffff;
              background: #D44743;
            }
            &:nth-child(3n-1) {
              margin-left: 0.1rem;
              margin-right: 0.1rem;
            }
          }
        }
        .btn {
          height: 1rem;
          line-height: 1rem;
          background: #D44743;
          font-size: 0.34rem;
          color: #ffffff;
        }
      }
    }
  }
</style>
